<template>
  <el-table size="small" v-loading="state.dataListLoading" :data="state.dataList" border @selection-change="state.dataListSelectionChangeHandle" style="width: 100%">
    <el-table-column prop="uname" label="账号" width="150" header-align="center" align="center"></el-table-column>
    <el-table-column prop="regIp" label="注册ip" width="150" header-align="center" align="center">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <el-link type="primary" @click="linkSubMemberForExtHandle(scope.row, 'regIp')">{{ scope.row.regIp }}</el-link>
          <el-icon color="red" size="20" class="hover" @click="blockHandle(scope.row.regIp, 2)"><RemoveFilled /></el-icon>
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="deviceId" label="设备id" width="170" header-align="center" align="center">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <el-link type="primary" @click="linkSubMemberForExtHandle(scope.row, 'deviceId')">{{ scope.row.deviceId }}</el-link>
          <el-icon color="red" size="20" class="hover" @click="blockHandle(scope.row.deviceId, 1)"><RemoveFilled /></el-icon>
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="totalInviteCount" label="总邀请人数" header-align="center" align="center">
      <template #default="scope">
        <el-link type="primary" @click="linkSubMemberHandle(scope.row)">{{ scope.row.totalInviteCount }}</el-link>
      </template>
    </el-table-column>
    <el-table-column prop="tronAddress" label="TRC20" width="170" header-align="center" align="center">
      <template #default="scope">
        <el-link type="primary" @click="linkTronHandle(scope.row.tronAddress)">{{ scope.row.tronAddress }}</el-link>
      </template>
    </el-table-column>
    <el-table-column prop="totalBounty" label="总赏金" header-align="center" align="center"></el-table-column>
    <el-table-column prop="totalBuyCount" label="总充值次数" header-align="center" align="center"></el-table-column>
    <el-table-column prop="totalBuyAmount" label="总充值金额" header-align="center" align="center"></el-table-column>
    <el-table-column prop="totalSellCount" label="总卖出次数" header-align="center" align="center"></el-table-column>
    <el-table-column prop="totalSellAmount" label="总卖出金额" header-align="center" align="center"></el-table-column>
    <el-table-column prop="createDate" label="注册时间" width="150" header-align="center" align="center"></el-table-column>
    <el-table-column prop="lastOnlineDate" label="最后上线时间" width="150" header-align="center" align="center"></el-table-column>
  </el-table>
  <el-pagination :current-page="state.page" :page-sizes="[10, 20, 50, 100]" :page-size="state.limit" :total="state.total" layout="total, sizes, prev, pager, next, jumper" @size-change="state.pageSizeChangeHandle" @current-change="state.pageCurrentChangeHandle"> </el-pagination>

  <el-radio-group v-model="tab" style="margin-top: 30px" size="small" v-if="subState.dataForm.puname">
    <el-radio-button label="base">下级基本信息</el-radio-button>
    <el-radio-button label="ext">下级扩展信息</el-radio-button>
  </el-radio-group>

  <!-- 下级基本信息 -->
  <div class="sub-table" v-if="breadcrumbs.length && tab === 'base'">
    <el-breadcrumb :separator-icon="ArrowRight">
      <el-breadcrumb-item v-for="(item, index) in breadcrumbs" :key="index"
        ><a href="javascript:;">{{ item }}</a></el-breadcrumb-item
      >
    </el-breadcrumb>
    <el-table size="small" v-loading="subState.dataListLoading" :data="subState.dataList" border style="width: 100%; margin-top: 10px">
      <el-table-column prop="uname" label="账号" width="120" header-align="center" align="center"></el-table-column>
      <el-table-column prop="channelCode" label="获客渠道" min-width="100" header-align="center" align="center"></el-table-column>
      <el-table-column prop="puname" label="邀请人" min-width="120" header-align="center" align="center"></el-table-column>
      <el-table-column prop="referralCode" label="推荐码" header-align="center" align="center"></el-table-column>
      <el-table-column prop="balance" label="余额" header-align="center" align="center"></el-table-column>
      <el-table-column prop="bounty" label="任务赏金" min-width="100" header-align="center" align="center"></el-table-column>
      <el-table-column prop="commission" label="佣金" header-align="center" align="center"></el-table-column>
      <el-table-column prop="createDate" label="注册时间" width="160" header-align="center" align="center"></el-table-column>
      <el-table-column prop="status" label="状态" header-align="center" align="center">
        <template v-slot="scope">
          <dict-label dict-type="member_status" :dict-value="scope.row.status" :status="{ 2: 'warning', 3: 'danger' }"></dict-label>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="在线状态" min-width="150" header-align="center" align="center">
        <template v-slot="scope">
          <template v-if="calculateOnlineTime(scope.row.offlineTime, scope.row.onlineTime)['status'] === 'online'">
            <div style="display: flex; flex-direction: column">
              <el-tag class="ml-2" type="success">在线</el-tag>
              <p class="info">{{ calculateOnlineTime(scope.row.offlineTime, scope.row.onlineTime)["text"] }}</p>
            </div>
          </template>
          <template v-if="calculateOnlineTime(scope.row.offlineTime, scope.row.onlineTime)['status'] === 'offline'">
            <div style="display: flex; flex-direction: column">
              <el-tag class="ml-2" type="warning">离线</el-tag>
              <p class="info">{{ calculateOnlineTime(scope.row.offlineTime, scope.row.onlineTime)["text"] }}</p>
            </div>
          </template>
        </template>
      </el-table-column>
      <el-table-column prop="levelId" label="等级" header-align="center" align="center"></el-table-column>
      <el-table-column prop="totalInviteCount" label="总邀请人数" header-align="center" align="center">
        <template #default="scope">
          <el-link type="primary" @click="linkSubMemberHandle(scope.row)">{{ scope.row.totalInviteCount }}</el-link>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination :current-page="subState.page" :page-sizes="[10, 20, 50, 100]" :page-size="subState.limit" :total="subState.total" layout="total, sizes, prev, pager, next, jumper" @size-change="subState.pageSizeChangeHandle" @current-change="subState.pageCurrentChangeHandle"> </el-pagination>
  </div>

  <!-- 下级扩展信息 -->
  <div class="sub-table" v-if="tab === 'ext'">
    <el-table size="small" v-loading="subExtstate.dataListLoading" :data="subExtstate.dataList" border @selection-change="subExtstate.dataListSelectionChangeHandle" style="width: 100%">
      <el-table-column prop="uname" label="账号" width="150" header-align="center" align="center"></el-table-column>
      <el-table-column prop="regIp" label="注册ip" width="150" header-align="center" align="center">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span>{{ scope.row.regIp }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="deviceId" label="设备id" width="170" header-align="center" align="center">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span>{{ scope.row.deviceId }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="totalInviteCount" label="总邀请人数" header-align="center" align="center">
        <template #default="scope">
          <span>{{ scope.row.totalInviteCount }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="tronAddress" label="TRC20" width="170" header-align="center" align="center">
        <template #default="scope">
          <el-link type="primary" @click="linkTronHandle(scope.row.tronAddress)">{{ scope.row.tronAddress }}</el-link>
        </template>
      </el-table-column>
      <el-table-column prop="totalBounty" label="总赏金" header-align="center" align="center"></el-table-column>
      <el-table-column prop="totalBuyCount" label="总充值次数" header-align="center" align="center"></el-table-column>
      <el-table-column prop="totalBuyAmount" label="总充值金额" header-align="center" align="center"></el-table-column>
      <el-table-column prop="totalSellCount" label="总卖出次数" header-align="center" align="center"></el-table-column>
      <el-table-column prop="totalSellAmount" label="总卖出金额" header-align="center" align="center"></el-table-column>
      <el-table-column prop="createDate" label="注册时间" width="150" header-align="center" align="center"></el-table-column>
      <el-table-column prop="lastOnlineDate" label="最后上线时间" width="150" header-align="center" align="center"></el-table-column>
    </el-table>
    <el-pagination :current-page="subExtstate.page" :page-sizes="[10, 20, 50, 100]" :page-size="subExtstate.limit" :total="subExtstate.total" layout="total, sizes, prev, pager, next, jumper" @size-change="subExtstate.pageSizeChangeHandle" @current-change="subExtstate.pageCurrentChangeHandle">
    </el-pagination>
  </div>

  <!-- 通过设备id关联用户表格 -->
  <div class="sub-table" v-if="extState.dataList.length">
    <el-table size="small" v-loading="extState.dataListLoading" :data="extState.dataList" border @selection-change="extState.dataListSelectionChangeHandle" style="width: 100%">
      <el-table-column prop="uname" label="账号" width="150" header-align="center" align="center"></el-table-column>
      <el-table-column prop="regIp" label="注册ip" width="150" header-align="center" align="center"> </el-table-column>
      <el-table-column prop="deviceId" label="设备id" show-overflow-tooltip width="150" header-align="center" align="center"> </el-table-column>
      <el-table-column prop="tronAddress" label="TRC20" width="170" header-align="center" align="center">
        <template #default="scope">
          <el-link type="primary" size="small" @click="linkTronHandle(scope.row.tronAddress)">{{ scope.row.tronAddress }}</el-link>
        </template>
      </el-table-column>
      <el-table-column prop="createDate" label="注册时间" width="150" header-align="center" align="center"></el-table-column>
      <el-table-column prop="lastOnlineDate" label="最后上线时间" width="150" header-align="center" align="center"></el-table-column>
      <el-table-column prop="totalBounty" label="总赏金" header-align="center" align="center"></el-table-column>
      <el-table-column prop="totalBuyCount" label="总充值次数" header-align="center" align="center"></el-table-column>
      <el-table-column prop="totalBuyAmount" label="总充值金额" header-align="center" align="center"></el-table-column>
      <el-table-column prop="totalSellCount" label="总卖出次数" header-align="center" align="center"></el-table-column>
      <el-table-column prop="totalSellAmount" label="总卖出金额" header-align="center" align="center"></el-table-column>
      <el-table-column prop="totalInviteCount" label="总邀请人数" header-align="center" align="center">
        <template #default="scope">
          {{ scope.row.totalInviteCount }}
        </template>
      </el-table-column>
    </el-table>
    <el-pagination :current-page="extState.page" :page-sizes="[10, 20, 50, 100]" :page-size="extState.limit" :total="extState.total" layout="total, sizes, prev, pager, next, jumper" @size-change="extState.pageSizeChangeHandle" @current-change="extState.pageCurrentChangeHandle"> </el-pagination>
  </div>
</template>

<script lang="ts" setup>
import { reactive, toRefs, ref } from "vue";
import useView from "@/hooks/useView";
import baseService from "@/service/baseService";
import { ElMessage, ElMessageBox } from "element-plus";
import { ArrowRight, RemoveFilled } from "@element-plus/icons-vue";
import { calculateTimeDifference } from "@/utils/utils";

const tab = ref("base");

const view = reactive({
  getDataListURL: "/member/memberext/page",
  getDataListIsPage: true,
  createdIsNeed: false,
  dataForm: {
    uname: ""
  }
});
const state = reactive({ ...useView(view), ...toRefs(view) });
const breadcrumbs: any = ref([]);
const init = (row?: any) => {
  view.dataForm.uname = row.uname;
  state.getDataList();
};

const subView = reactive({
  getDataListURL: "/member/member/page",
  getDataListIsPage: true,
  createdIsNeed: false,
  dataForm: {
    puname: ""
  }
});
const subState = reactive({ ...useView(subView), ...toRefs(subView) });
const linkSubMemberHandle = (row?: any) => {
  if (row.totalInviteCount === 0) return;
  let uname: string = row.uname;
  if (!breadcrumbs.value.includes(uname)) {
    breadcrumbs.value.push(uname);
  }
  subView.dataForm.puname = row.uname;
  subState.getDataList();
  subExtView.dataForm.puname = row.uname;
  subExtstate.getDataList();
};

// 下级会员扩展信息
const subExtView = reactive({
  getDataListURL: "/member/memberext/page",
  getDataListIsPage: true,
  createdIsNeed: false,
  dataForm: {
    puname: ""
  }
});
const subExtstate = reactive({ ...useView(subExtView), ...toRefs(subExtView) });
// const linkSubExtMemberHandle = (row?: any) => {
//   if (row.totalInviteCount === 0) return;
//   let uname: string = row.uname;
//   if (!breadcrumbs.value.includes(uname)) {
//     breadcrumbs.value.push(uname);
//   }
//   subView.dataForm.puname = row.uname;
//   subState.getDataList();
// };

const linkTronHandle = (addr: string) => {
  window.open(`https://tronscan.org/#/address/${addr}/transfers`);
};

const extView: any = reactive({
  getDataListURL: "/member/memberext/page",
  getDataListIsPage: true,
  createdIsNeed: false,
  dataForm: {
    regIp: "",
    deviceId: ""
  }
});
const extState: any = reactive({ ...useView(extView), ...toRefs(extView) });
const linkSubMemberForExtHandle = (row?: any, type: any = "") => {
  if (!row[type]) return;
  extView.dataForm.regIp = "";
  extView.dataForm.deviceId = "";
  extView.dataForm[type] = row[type];
  extState.getDataList();
};

/**
 * 计算在线时间
 * @param {string} offlineTime 离线时间
 * @param {string} onlineTime  上线时间
 */
const calculateOnlineTime = (offlineTime?: any, onlineTime?: any) => {
  if ((!offlineTime && !onlineTime) || !onlineTime) {
    return {
      status: "offline",
      text: `-`
    };
  }
  let _onlineTime = new Date(onlineTime).getTime();
  let _offlineTime = offlineTime ? new Date(offlineTime).getTime() : null;
  return calculateTimeDifference(_onlineTime, _offlineTime);
};

const blockHandle = (value: any, type: any) => {
  let typeLable = type === 1 ? "设备" : "IP";
  ElMessageBox.confirm(`请确认是否将此${typeLable}: ${value}进行风控. 继续?`, "提示", {
    type: "warning",
    closeOnClickModal: false,
    beforeClose: (action, instance, done) => {
      if (action === "confirm") {
        let dataForm: any = {
          type,
          value
        };
        instance.confirmButtonLoading = true;
        baseService
          .post(`/member/memberblacklist`, dataForm)
          .then(() => {
            done();
            instance.confirmButtonLoading = false;
            ElMessage({
              type: "success",
              message: "操作成功"
            });
          })
          .catch(() => {
            done();
            instance.confirmButtonLoading = false;
          });
      } else {
        done();
      }
    }
  }).then(async () => {
    state.getDataList();
  });
};

defineExpose({
  init
});
</script>

<style lang="scss" scoped>
.sub-table {
  margin-top: 20px;
}
.hover:hover {
  transform: scale(1.3);
  transition: 0.3s;
}
.hover {
  margin-left: 4px;
  cursor: pointer;
}
</style>
